<template>
  <el-card shadow="never">
    <!-- 表格工具栏 -->
    <div class="ele-table-tool">
      <div class="ele-table-tool-title">资产列表</div>
      <div class="ele-table-tool-right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="show"
        >添加
        </el-button>
      </div>
    </div>
    <!-- 数据表格 -->
    <ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
      <template slot-scope="{}">
        <el-table-column prop="name" label="业务线名称" show-overflow-tooltip min-width="110" />
        <el-table-column prop="asset_count" label="资产数量" show-overflow-tooltip min-width="110" />
        <el-table-column prop="vuln_count" label="漏洞数量" show-overflow-tooltip min-width="110" />
        <el-table-column
          prop="manage"
          label="负责人"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{
            row.manage === "None" ? "暂无" : row.manage.name
          }}</template>
        </el-table-column>
        <el-table-column
          prop="add_time"
          label="创建时间"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{
            row.add_time | toDateString
          }}</template>
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{
            row.update_time | toDateString
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          min-width="160"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              icon="el-icon-edit"
              type="primary"
              :underline="false"
              @click="edit(scope.row)"
            >配置</el-link>

            <el-popconfirm
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <el-link
                slot="reference"
                icon="el-icon-delete"
                type="primary"
                :underline="false"
              >删除</el-link>
            </el-popconfirm>

            <el-link
              icon="el-icon-finished"
              type="primary"
              :underline="false"
              @click="jump(scope.row)"
            >详情
            </el-link>
          </template>
        </el-table-column>
      </template>
    </ele-data-table>
  </el-card>
</template>

<script>
export default {
  name: 'AssetRootTable',
  props: {
    params: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      choose: [],
      table: {
        url: '/asset/group/list/',
        where: {}
      }
    }
  },
  watch: {
    params(newValue) {
      this.table.where = { key: newValue }
      this.$refs.table.reload()
    }
  },
  methods: {
    /* 显示资产编辑表单 */
    show() {
      this.$emit('show')
    },
    /* 删除业务线 */
    del(id) {
      this.$http.get(`/asset/group/delete/${id}`).then(res => {
        if (res.data.code === 0) {
          this.$message({ type: 'success', message: '删除成功' })
          this.$refs.table.reload()
        }
      })
    },
    /* 编辑资产 */
    edit(row) {
      this.$emit('edit-asset', row)
      this.show()
    },
    reload() {
      this.table.where = { }
      this.$refs.table.reload()
    },
    /* 跳转到资产详情 */
    jump(row) {
      this.$router.push(`/asset/rootdetial/${row.id}`)
    }
  }
}
</script>

<style scoped>

</style>
